<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Clipic.js</title>
	<style>
		body,html{width:100%;height:100%;background:#f2f2f2;padding:0;margin:0;font-size:1em;}
		.button{width:80%;background:green;color:#fff;padding:10px;text-align:center;margin:20px auto;border-radius:4px;position:relative;}
		.upload-img{position:absolute;width:100%;height:100%;top:0;left:0;opacity:0;}
		#previewImg{ width: 100%; max-width:100%;}

        .phone{ width:400px; height: 850px; max-width: 100%; max-height: 100%; border:1px solid #DDD;}
	</style>
</head>
<body>
	<div class="phone">
		<img id="previewImg" src="" alt="预览" />
		<div class="button" role="button">
			选择图片 <input type="file" name="file" class="upload-img" accept="image/*" onchange="chooseImg(this)" />
		</div>
	</div>



<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
<script src="dish/clipping.js"></script>
<!-- <script src="dish/clipping.min.js"></script> -->
<script>
    // eruda.init();

    var clipping = new Clipping({
        // width: 500,
        // height: 400,
        ratio: 16 / 9,
        // buttonText: ['Cancel', 'Reset', 'Done'],
        name: 'test',
        encode: 'base64', // 支持 base64、blob、file
        type: 'png',
        quality: '0.9', // 导出图片的质量
        onDone: function (e) {
            // console.log('img:', e);
            /*var reader = new FileReader();
            reader.readAsDataURL(e);
            reader.onload = function(e){
                //console.log('load:', e, this);
                document.getElementById('previewImg').src = this.result; 
            }*/
            document.getElementById('previewImg').src = e;
        },
        onCancel: function () {
            console.log('取消裁剪');
        }
    });

    function chooseImg(event){
        var files = event.files || event.dataTransfer.files;
        clipping.created(files[0]);
        // event.value = '';
    }
</script>
</body>
</html>